<template>
  <Container class="coupon-count">
      <div class="container-header title title-center" slot="header">{{info.name}}
        <Button size="large" class="fl btn-back"  icon="ios-arrow-back" @click="$router.back()">返回</Button>
      </div>
      <div class="tc pt">统计时间：{{info.date}}</div>
      <div class="bg-light">
        <div class="container-title">基本信息</div>
        <Form :label-width="120">
          <Row class="pr">
            <Col span="6">
              <FormItem label="优惠规则：">
                <span>{{info.rule}}</span>
              </FormItem>
              <FormItem label="限领：">
                <span>{{info.receiveLimitText}}</span>
              </FormItem>
              <FormItem label="助力次数：" v-show="info.isAssistCoupon">
                <span>{{info.assistLimitQuantity}}</span>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="活动状态：">
                <span>{{info.status | filterStatus}}</span>
              </FormItem>
              <FormItem label="活动对象：">
                <span>{{info.userLevel}}</span>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="推广方式：">
                <span>{{info.receiveMethod | filterMethod}}</span>
              </FormItem>
              <FormItem label="是否伙伴专享：">
                <span>{{info.isPartnerExclusive ? '是' : '否'}}</span>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="是否公开：">
                <span>{{info.isPublic ? '是' : '否'}}</span>
              </FormItem>
              <FormItem label="是否允许分享：">
                <span>{{info.isShare ? '是' : '否'}}</span>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div class="bg-light">
        <div class="container-title">活动概况</div>
        <div class="total">
          <div class="item">
            <CountUp :end="total.amount"></CountUp>
            <p class="big">优惠券发放量（张）</p>
          </div>
          <div class="item">
            <CountUp :end="total.receiveAmount"></CountUp>
            <p class="big">优惠券领取量（张）</p>
          </div>
          <div class="item">
            <CountUp :end="total.usedAmount"></CountUp>
            <p class="big">优惠券使用量（张）</p>
          </div>
          <div class="item">
            <CountUp :end="total.totalOrderQuantity"></CountUp>
            <p class="big">下单量</p>
          </div>
          <div class="item">
            <CountUp :end="total.totalAmount" :decimals="2"></CountUp>
            <p class="big">下单金额</p>
          </div>
          <div class="item">
            <CountUp :end="total.totalOrderSkuQuantity"></CountUp>
            <p class="big">下单商品数</p>
          </div>
          <div class="item">
            <CountUp :end="total.totalDiscount" :decimals="2"></CountUp>
            <p class="big">优惠总金额</p>
          </div>
          <div class="item">
            <CountUp :end="total.totalUserCount"></CountUp>
            <p class="big">优惠使用用户数</p>
          </div>
          <div class="item" v-show="info.isAssistCoupon">
            <CountUp :end="total.totalAssistQuantity"></CountUp>
            <p class="big">助力总次数</p>
          </div>
        </div>
      </div>
      <div class="bg-light">
          <div class="container-title">转化分析</div>
          <IEcharts :options="list.line" auto-resize></IEcharts>
      </div>
      <Loader :status="list.status" @refresh="getData"></Loader>
  </Container>
</template>

<script>
import IEcharts from '~/ECharts'
import CountUp from 'vue-countup-v2'
import staticsData from './staticCouponData'
export default {
  components: {
    IEcharts,
    CountUp
  },
  data() {
    return {
      id: this.$route.query.id || '',
      list: staticsData,
      info: {
        name: '',
        rule: '',
        date: '',
        receiveLimit: '',
        status: '',
        userLevel: '',
        receiveMethod: '',
        isShare: false,
        isPublic: false,
        isPartnerExclusive: false,
        isAssistCoupon: false,
        assistLimitQuantity: 0
      },
      total: {
        amount: 0,
        receiveAmount: 0,
        usedAmount: 0,
        totalOrderQuantity: 0,
        totalAmount: 0,
        totalOrderSkuQuantity: 0,
        totalDiscount: 0,
        totalUserCount: 0,
        totalAssistQuantity: 0
      }
    }
  },
  mounted() {
    if (this.id) this.getData()
  },
  methods: {
    getData() {
      this.list.status = 'loading'
      this.$ajaxGet(`/promotion/coupon_info/coupon_data_analysis/${this.id}`).then(data => {
        let info = data.couponInfoDTO
        let total = data.activityStatistics
        let line = data.itemList || []

        this.info.name = info.couponName
        if (info.couponDiscountType == 'DISCOUNT_COUPON') {
          this.info.rule = info.discountRuleDescription + '折'
        } else {
          this.info.rule = '每满' + info.useCondition + '减' + info.denomination
        }
        this.info.receiveLimitQuantity = info.receiveLimitQuantity
        this.info.receiveLimitText = info.receiveLimitType === 'LIMIT_ONE' ? `活动期间每人限领${this.info.receiveLimitQuantity}张` : `活动期间每人每天限领${this.info.receiveLimitQuantity}张`
        this.info.status = info.couponStatus
        this.info.userLevel = info.userLevel
        this.info.receiveMethod = info.receiveMethod
        this.info.isShare = info.isShare
        this.info.isPublic = info.isPublic
        this.info.isPartnerExclusive = info.isPartnerExclusive
        this.total.amount = info.amount
        this.info.isAssistCoupon = info.isAssistCoupon
        this.info.assistLimitQuantity = info.assistLimitQuantity
        if (!info.validityStartDate || !info.validityEndDate) {
          this.info.date = info.validityDays + '天'
        } else {
          this.info.date = info.validityStartDate + '-' + info.validityEndDate
        }
        if (info.amount < 0) {
          this.total.amount = info.receiveAmount ? Number(info.receiveAmount) : 0 
        } else {
          this.total.amount = info.amount ? Number(info.amount) : 0 
        }
        this.total.receiveAmount = info.receiveAmount ? Number(info.receiveAmount) : 0 
        this.total.usedAmount = info.usedAmount ? Number(info.usedAmount) : 0 
        if (total) {
          this.total.totalOrderQuantity = total.totalOrderQuantity ? Number(total.totalOrderQuantity) : 0 
          this.total.totalAmount = total.totalAmount ? Number(total.totalAmount) : 0 
          this.total.totalOrderSkuQuantity = total.totalOrderSkuQuantity ? Number(total.totalOrderSkuQuantity) : 0 
          this.total.totalDiscount = total.totalDiscount ? Number(total.totalDiscount) : 0 
          this.total.totalUserCount = total.totalUserCount ? Number(total.totalUserCount) : 0
          this.total.totalAssistQuantity = total.totalAssistQuantity
        }

        let name = line.map(item => item.orderDate)
        let receiveNum = line.map(item => item.totalReceiveQuantity)
        let userNum = line.map(item => item.totalUserCount)
        let orderNum = line.map(item => item.totalOrderQuantity)
        let skuNum = line.map(item => item.totalOrderSkuQuantity)
        let amount = line.map(item => item.totalAmount)
        let assNum = line.map(item => item.totalAssistQuantity)
        this.list.line.xAxis.data = name
        this.list.line.series[0].data = receiveNum
        this.list.line.series[1].data = orderNum
        this.list.line.series[2].data = userNum
        this.list.line.series[3].data = orderNum
        this.list.line.series[4].data = skuNum
        this.list.line.series[5].data = amount
        this.list.line.series[6].data = assNum
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    }
  },
  filters: {
    filterLimit(val) {
      let list = {
        'LIMIT_ONE': '活动期间每人限领1张',
        'LIMIT_ONE_PER_DAY': '活动期间每人每天限领1张'
      }
      return list[val]
    },
    filterStatus(val) {
      let list = {
        'NO_OPEN': '未启用',
        'OPEN': '启用',
        'CLOSE': '已关闭'
      }
      return list[val]
    },
    filterMethod(val) {
      let list = {
        'BUYER_RECEIVE': '买家领取',
        'SELLER_SEND': '卖家发放'
      }
      return list[val]
    }
  }
}
</script>
